
<html>
    <head>
        <link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />

        <script src="http://www.google.com/jsapi"></script>
        <script src="sTool.js"></script>
        <script src="jquery-1.3.2.min.js"></script>
        <script src="jquery-ui-1.7.2.custom.min.js"></script>

        <script type="text/javascript">

//            google.load("jquery", "1.3.2");
//            google.load("jqueryui", "1.7.2");

            var sToolTest = {

                destroyDialog: function() {
                    $('#dialog').empty() ;
                    $('#dialog').dialog('destroy') ;
                },

                showProjectSettingsDialogTest: function() {
                    sToolTest.destroyDialog() ;

                    var data = {
                        'id': 1234,
                        'name': 'name',
                        'description': 'description',
                        'createdBy' : 'createdBy'
                    } ;
                    sTool.showProjectSettingsDialog(data);

                    if ($('#dialog #edit-project-id').attr('value') != 1234) {
                        alert('ProjectId hidden field not found') ;
                    }
                    if ($('#dialog #edit-project-name').attr('value') != 'name') {
                        alert('ProjectName field not found') ;
                    }
                    if ($('#dialog #edit-project-descr').attr('value') != 'description') {
                        alert('Descr field not found') ;
                    }

                    if ($('#dialog  button#edit-save-project').attr('id') != 'edit-save-project') {
                        alert('Save button not found') ;
                    }
                },

                showProjectInfoDialogTest: function() {
                    sToolTest.destroyDialog() ;

                    var data = {
                        'name': 'name',
                        'description': 'description',
                        'createdBy' : 'createdBy'
                    } ;

                    sTool.showProjectInfoDialog(data);

                    if ($('#dialog table').attr('id') != 'project-info-table') {
                        alert('Project info table not found') ;
                    }
                    if ($('#dialog table #project-name').text() != 'name') {
                        alert('Project info name not found') ;
                    }
                    if ($('#dialog table #project-descr').text() != 'description') {
                        alert('Project info descr not found') ;
                    }
                    if ($('#dialog table #project-createdBy').text() != 'createdBy') {
                        alert('Project info createdBy not found') ;
                    }
                },

                showCreateProjectDialogTest: function() {
                    sToolTest.destroyDialog() ;
                    sTool.showCreateProjectDialog() ;

                    if ($('#dialog #create-project-name').attr('id') != 'create-project-name') {
                        alert('Project name field not found in create') ;
                    }
                    if ($('#dialog #create-project-descr').attr('id') != 'create-project-descr') {
                        alert('Descr field not found in create') ;
                    }

                    if ($('#dialog  button#create-project-button').attr('id') != 'create-project-button') {
                        alert('Save button not found') ;
                    }
                } ,

                loadTasksTest: function() {
                    var data = {
                        'projectId': '1',
                        'tasks' : [
                            {
                                'id': 0,
                                'index': 0,
                                'name': 'name1',
                                'createdAt': 'createdAt0',
                                'createdBy': 'createdBy0',
                                'assignedTo': 'assignedTo0',
                                'priority': 'priority0',
                                'status': 'status0'
                            },
                            {
                                'id': 1,
                                'index': 2,
                                'name': 'name2',
                                'createdAt': 'createdAt1',
                                'createdBy': 'createdBy1',
                                'assignedTo': 'assignedTo1',
                                'priority': 'priority1',
                                'status': 'status1'
                            }
                        ]
                    } ;

                    var tasksTable = $("#tasks-table") ;
                    tasksTable.find('tbody').empty();

                    for (var i = 0 ; i < data.tasks.length; i ++) {
                        var taskRow = $("#sample-task-row-table tr").clone() ;
                        taskRow.find('#sample-task-index').text(data.tasks[i].index) ;
                        taskRow.find('#sample-task-name').text(data.tasks[i].name) ;
                        taskRow.find('#sample-task-createdAt').text(data.tasks[i].createdAt) ;
                        taskRow.find('#sample-task-createdBy').text(data.tasks[i].createdBy) ;
                        taskRow.find('#sample-task-assignedTo').text(data.tasks[i].assignedTo) ;
                        taskRow.find('#sample-task-priority').text(data.tasks[i].priority) ;
                        taskRow.find('#sample-task-status').text(data.tasks[i].status) ;
                        taskRow.find('#sample-task-edit').text('edit') ;

                        tasksTable.append(taskRow) ;
                    }

                    var createTaskLink = $('.create-task-link').clone() ;
                    createTaskLink.css('display', 'inline') ;
                    createTaskLink.attr('id', 'create-task-' + data.projectId) ;

                    tasksTable.after(createTaskLink) ;

                },

                showCreateTaskDialogTest: function() {
                    sToolTest.destroyDialog() ;

                    var data = {
                        'projectId': 12
                    } ;

                    $("#dialog").dialog({
                            title: 'Add task',
                            width: 700,
                            height: 300,
                            open:  function(event, ui) {

                                var taskData = $('#create-task').clone() ;
                                taskData.css('display', 'block') ;

                                taskData.find('#create-task-projectId').attr('value', data.projectId) ;

                                $('#dialog').append(taskData) ;

                                taskData.find('#create-task-save').click(
                                        function(e) {

                                        }
                                        );
                            },
                            close : function(event, ui) {
                                $("#dialog").empty() ;
                                $("#dialog").dialog('destroy') ;
                            }

                        }
                    ) ;

                }
            };

            window.onload = function() {
//                sToolTest.showProjectSettingsDialogTest() ;
//                sToolTest.showProjectInfoDialogTest() ;

                sToolTest.showCreateProjectDialogTest() ;
//                sToolTest.destroyDialog() ;

//                sToolTest.loadTasksTest() ;
//                sToolTest.showCreateTaskDialogTest() ;
            } ;

        </script>
    </head>
    <body>
        <!-- project info table -->
        <table style="display:none;" id="project-info-table">
            <tr>
                <td>Project name: </td>
                <td id="project-name"></td>
            </tr>
            <tr>
                <td>Description: </td>
                <td id="project-descr"></td>
            </tr>
            <tr>
                <td>Created by: </td>
                <td id="project-createdBy"></td>
            </tr>
        </table>

        <!-- project settings markup -->
        <div id="project-settings" style="display:none;">
            <input type="hidden" id="edit-project-id"></input>
            <span class="project-settings-roles">Roles</span>
            <span class="project-settings-participants">Participants</span>
            <table>
                <tr>
                    <td>Project name: </td> 
                    <td><input id="edit-project-name" name="edit-project-name" ></input></td>
                </tr>
                <tr>
                    <td>Description: </td>
                    <td><textarea id="edit-project-descr"></textarea></td>
                </tr>
                <tr>
                    <td>Created by: </td>
                    <td id="edit-createdBy"></td>
                </tr>
            </table>
            <button id="edit-save-project" >Update</button>
        </div>

        <!-- Add role markup -->
        <div id="create-project" style="display:none;">

            <table>
                <tr>
                    <td>
                        <label for="create-project-name">Project name: </label>
                    </td>
                    <td>
                        <input id="create-project-name"name="create-project-name"></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create-project-descr">Description: </label>
                    </td>
                    <td>
                        <textarea id="create-project-descr" name="create-project-descr" rows="5" cols="30"></textarea>
                    </td>
                </tr>
            </table>

            <button id="create-project-button">Create</button>
        </div>

        <!-- tasks-table -->
        <table class="list" id="tasks-table" cellpadding="0" cellspacing="1">
            <thead>
                <tr>
                    <th width="1%">#</th>
                    <th width="40%">Name</th>
                    <th width="10%">Created at</th>
                    <th width="15%">Created by</th>
                    <th width="15%">Assigned to</th>
                    <th width="10%">Priority</th>
                    <th width="10%">Status</th>
                    <th width="1%">Edit</th>
                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>

        <!--sample tasks table row-->
        <table id="sample-task-row-table" style="display:none">
            <tr id="sample-task-row">
                <td id="sample-task-index"></td>
                <td id="sample-task-name"></td>
                <td id="sample-task-createdAt"></td>
                <td id="sample-task-createdBy"></td>
                <td id="sample-task-assignedTo"></td>
                <td id="sample-task-priority"></td>
                <td id="sample-task-status"></td>
                <td id="sample-task-edit"></td>
            </tr>
        </table>
        <span class="create-task-link" style="display:none;">Add task</span>

        <!--create task markup-->
        <div id="create-task" style="display:none">
            <input type="hidden" id="create-task-projectId" name="create-task-projectId"></input>
            <table>
                <tr>
                    <td>
                        No:
                    </td>
                    <td id="create-task-no">

                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create-task-name">Task name: </label>
                    </td>
                    <td>
                        <input maxlength="128" style="width: 400" id="create-task-name" name="create-task-name"></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create-task-description">Description: </label>
                    </td>
                    <td>
                        <textarea id="create-task-description" name="create-task-description" rows="3" cols="60"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create-task-priority">Priority: </label>
                    </td>
                    <td>
                        <select name="create-task-priority" id="create-task-priority">
                            <option value="0">Low</option>
                            <option value="1" selected="selected">Medium</option>
                            <option value="2">High</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create-task-assignedTo">Assign to: </label>
                    </td>
                    <td>
                        <input type="text" id="create-task-assignedTo" name="create-task-assignedTo"></input>
                    </td>
                </tr>
            </table>

            <button id="create-task-save">Save</button>
        </div>

        <div id="dialog" ></div>
    </body>
</html>

